<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>吃果果 | 上班族的网上鲜切水果店</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
	$('.popup-with-zoom-anim').magnificPopup({
		type: 'inline',
		fixedContentPos: false,
		fixedBgPos: true,
		overflowY: 'auto',
		preloader: false,
		midClick: true,
		removalDelay: 300,
		mainClass: 'my-mfp-zoom-in'
	});	
	
	$("#test_popup").click(function(event){
		$('.popup-with-zoom-anim').magnificPopup('open');
	});

					
	$("#submit_button").click(function(event){
		
		// get values
		var client_name_val=$("#client_name_id").val();
		var address_val=$("#address_id").val();
		var phone_number_val=$("#phone_number_id").val();
		var amount_t1_val=$("#amount_t1_id").val();
		var amount_t2_val=$("#amount_t2_id").val();
		var amount_t3_val=$("#amount_t3_id").val();
		
		// Verification
		if (client_name_val == "" || client_name_val == "联系人为必填项" || client_name_val == "联系人"){
			$("#client_name_id").css("color","red");
			$("#client_name_id").val("联系人为必填项");
			return false;
		} 
		
		if (address_val == "" || address_val == "地址为必填项"||address_val == "地址"){
			$("#address_id").css("color","red");
			$("#address_id").val("联系人为必填项");
			return false;
		} 
		
		if (phone_number_val == "" || phone_number_val == "联系电话为必填项" || phone_number_val == "联系电话"){
			$("#phone_number_id").css("color","red");
			$("#phone_number_id").val("联系电话为必填项");
			return false;
		} 
		
		// submit data to server

		$.ajax({
			type:"post",
			async:true,
			url:"save_gift_order.php",
			data: {client_name:client_name_val, address:address_val, phone_number:phone_number_val,amount_t1:amount_t1_val,amount_t2:amount_t2_val,amount_t3:amount_t3_val},
			beforeSend:function(){
				$('.popup-with-zoom-anim').magnificPopup('open');
			},
			dataType:"html",
			error:function(){
				alert("error");
			},
			success:function(data){
				$("#small-dialog1").html(data);
			}
		}); 
	});
});				
</script>
</head>

<body>
		<!----start-header----------->
<div class="header_bg">
	<div class="wrap">
		<div class="header">
			<!--------start-logo------>
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt="" /></a>
			</div>	
			<!--------end-logo--------->
			
			<div class="clear"> </div>
		</div>
	</div>
</div>
<!------end-header------------>

<!------start-popup------------>
<div id="small-dialog1" class="mfp-hide">
	<img src='images/load.gif' alt="" />
</div>
<a class="popup-with-zoom-anim" href="#small-dialog1" style.display="none"></a>
<!------start-popup------------>

<!-----start-order-------->
<div class="order" id="order">
	<div class="wrap">
		<h2>领取套餐</h2>
		<div class="activity_desc">
			<p>说明：</p>
			<p>亲，欢迎参加“请同事吃果果”活动，我们为您准备了三种套餐供您选择，分别是：</p>
			<p>1. 瘦身组合（菠萝+火龙果+橙子）</p>
			<p>2. 美颜组合（黄金果+西瓜+火龙果）</p>
			<p>3. 活力组合（菠萝+西瓜+哈密瓜）</p>
			<p>请您在下单的时候自行分配每一种套餐的数量，谢谢您的合作！</p>
			<p>我们将在次日下午03:00-下午04:00为您送达</p>
		</div>
			<div class="order-form">
				<form method="post">
					<input name="client_name" id="client_name_id" type="text" class="textbox" value="联系人" onfocus="this.value = '';document.getElementById('client_name_id').style.color='black';" onblur="if (this.value == '') {this.value = '联系人为必填项';document.getElementById('client_name_id').style.color='red';}"/>
					<input name="address" id="address_id" type="text" class="textbox" value="地址" onfocus="this.value = '';document.getElementById('address_id').style.color='black';" onblur="if (this.value == '') {this.value = '地址为必填项';document.getElementById('address_id').style.color='red';}"/>
					<input name="phone_number" id="phone_number_id" type="text" class="textbox" value="联系电话" onfocus="this.value = '';document.getElementById('phone_number_id').style.color='black';" onblur="if (this.value == '') {this.value = '联系电话为必填项';document.getElementById('phone_number_id').style.color='red';}"/>
					<input name="amount_t1" id="amount_t1_id" type="text" class="textbox" value="数量（盒）- 瘦身组合" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 0;}"/>		
					<input name="amount_t2" id="amount_t2_id" type="text" class="textbox" value="数量（盒）- 美颜组合" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 0;}"/>		
					<input name="amount_t3" id="amount_t3_id" type="text" class="textbox" value="数量（盒）- 活力组合" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 0;}"/>
					<span><input id="submit_button" type="button" value="提交订单"/></span>
					<div class="clear"></div>
				</form>
			</div>
	</div>
</div>
<!-----end-order-------->
</body>
</html>